<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/metrize.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/polaris/polaris.css" rel="stylesheet">
    <link href="css/square/blue.css" rel="stylesheet">
    <link href="css/jquery-ui.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<header class="header-content header-fixed bg-white clearfix">
    <!--  Logo -->
    <div class="logo bg-dark">
        <a href="#"><span class="logo-icon fa fa-th-large"></span> <span class="logo-text">JP</span></a>
    </div>

    <div class="top-nav">
        <ul class="list-none nav-left">
            <!-- to left menu -->
            <li class="unshow"><a class="toggle-min jp-gray jp-ripple" href="#"><i class="fa fa-bars"></i></a></li>
            <!-- dropdown settings -->
            <li class="dropdown">
                <a href="#" class="dropdown-toggle jp-gray jp-ripple" data-toggle="dropdown" id="dropdownMenu2"><i class="fa fa-gear"></i></a>
                <div class="dropdown-menu panel panel-default with-arrow" aria-labelledby="dropdownMenu2">
                    <div class="panel-heading"><span>Setting</span></div>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <p>User setting</p>
                            <div class="checkbox-inline">
                                <label>
                                    <input type="checkbox"> Check me out
                                </label>
                            </div>
                            <div class="checkbox-inline">
                                <label>
                                    <input type="checkbox"> Check me out
                                </label>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <p>User setting</p>
                            <label class="radio-inline">
                                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option1"> 2
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option1"> 3
                            </label>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a href="#" class="jp-gray jp-ripple"><i class="fa fa-truck"></i></a></li>
        </ul>

        <ul class="list-none nav-right pull-right">
            <!-- user info-->
            <li class="nav-profile dropdown">
                <a href="#" class="dropdown-toggle jp-gray jp-ripple" data-toggle="dropdown"><img src="img/t.jpg" class="img-circle img30_30" /> <span class="hidden-xs">LISA</span></a>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#"><i class="fa fa-dashboard"></i>Action</a></li>
                    <li><a href="#"><i class="fa fa-television"></i>Another action</a></li>
                    <li><a href="#"><i class="fa fa-file-o"></i>Something else here</a></li>
                    <li><a href="#"><i class="fa fa-table"></i>Separated link</a></li>
                </ul>
            </li>
            <li><a href="#" class="jp-gray jp-ripple"><i class="fa fa-wifi"></i></a></li>
        </ul>
    </div>

</header>
<div class="main-content">
    <!-- left nav -->
    <div class="nav-content bg-dark nav-vertical">
        <ul class="left-menu list-none">
            <li class="user-info">
                <div class="user-panel">
                    <div class="pull-left">
                        <img src="img/t.jpg" class="img-circle img45_45"/>
                    </div>
                    <div class="pull-left info">
                        <p>welcome,admin</p>
                        <a href="#"><i class="fa fa-circle"></i> online</a>
                    </div>
                </div>
                <form class="search-form">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" />
                        <span class="input-group-btn">
                            <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
                        </span>
                    </div>
                </form>
            </li>
            <li class="treeview ">
                <a href="main.html" class="jp-ripple"><i class="fa fa-dashboard"></i><span>Dashboard</span></a>
            </li>
            <li class="treeview active">
                <a href="#" class="jp-ripple"><i class="fa fa-television"></i><span>JP UI</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="Buttons.html" ><i class="fa fa-circle ng-scope"></i><span>Buttons</span><span class="badge badge-info ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="Icons.html"><i class="fa fa-circle ng-scope"></i><span>Icons</span></a></li>
                    <li class="jp-ripple"><a href="Typography.html" ><i class="fa fa-circle ng-scope"></i><span>Typography</span></a></li>
                    <li class="jp-ripple"><a href="Lists.html"><i class="fa fa-circle ng-scope"></i><span>Lists</span></a></li>
                    <li class="jp-ripple"><a href="Forms.html"><i class="fa fa-circle ng-scope"></i><span>Forms</span></a></li>
                    <li class="jp-ripple"><a href="Components.html"><i class="fa fa-circle ng-scope"></i><span>Components</span></a></li>
                    <li class="active jp-ripple"><a href="Panels.html"><i class="fa fa-circle ng-scope"></i><span>Panels</span></a></li>
                    <li class="jp-ripple"><a href="Grids.html"><i class="fa fa-circle ng-scope"></i><span>Grids</span></a></li>
                    <li class="jp-ripple"><a href="Timeline.html"><i class="fa fa-circle ng-scope"></i><span>Timeline</span></a></li>
                    <li class="jp-ripple"><a href="Tree.html"><i class="fa fa-circle ng-scope"></i><span>Tree</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-file-o"></i><span>Pages</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="SignIn.html"><i class="fa fa-circle ng-scope"></i><span>Sign In</span><span class="badge badge-info ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="SignUp.html"><i class="fa fa-circle ng-scope"></i><span>Sign Up</span></a></li>
                    <li class="jp-ripple"><a href="ForgotPassword.html"><i class="fa fa-circle ng-scope"></i><span>Forgot Password</span></a></li>
                    <li class="jp-ripple"><a href="404.html"><i class="fa fa-circle ng-scope"></i><span>404 Error</span></a></li>
                    <li class="jp-ripple"><a href="500.html"><i class="fa fa-circle ng-scope"></i><span>500 Error</span></a></li>
                    <li class="jp-ripple"><a href="Blank.html"><i class="fa fa-circle ng-scope"></i><span>Blank Page</span></a></li>
                    <li class="jp-ripple"><a href="Profile.html"><i class="fa fa-circle ng-scope"></i><span>Profile</span></a></li>
                    <li class="jp-ripple"><a href="Invoice.html"><i class="fa fa-circle ng-scope"></i><span>Invoice</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-table"></i><span>Tables</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="Basetable.html"><i class="fa fa-circle ng-scope"></i><span>Base Table</span><span class="badge badge-warning ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="Responsivetables.html"><i class="fa fa-circle ng-scope"></i><span>Responsive Tables</span></a></li>
                    <li class="jp-ripple"><a href="DataTables.html"><i class="fa fa-circle ng-scope"></i><span>Data Tables</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-pencil"></i><span>Forms</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="FormComponents.html"><i class="fa fa-circle ng-scope"></i><span>Form Components</span><span class="badge badge-warning ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="WizardForm.html"><i class="fa fa-circle ng-scope"></i><span>Wizard Form</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-bar-chart"></i><span>Charts</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="EChartsLine.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Line</span></a></li>
                    <li class="jp-ripple"><a href="EChartsBar.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Bar</span><span class="badge badge-primary ng-scope">5</span></a></li>
                    <li class="jp-ripple"><a href="EChartsPie.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Pie</span></a></li>
                    <li class="jp-ripple"><a href="EChartsScatter.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Scatter</span></a></li>
                </ul>
            </li>
            <li class="menu-divider"></li>
            <li class="nav-title">
                <span>Title</span>
            </li>
            <li class="li-sm active">
                <a href="#"><i class="fa fa-circle color-info"></i><span>JP Components</span></a>
            </li>
            <li class="li-sm treeview">
                <a href="#"><i class="fa fa-circle color-success"></i><span>JP Elements</span></a>
            </li>
        </ul>

    </div>
    <!-- content -->
    <div class="content">
        <section class="jppage">
            <div class="row">
                <!-- Ribbons Panels -->
                <div class="col-lg-8 clearfix">
                    <h2 class="section-header">Ribbon Panels</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="ribbon-pannel ribbon-default">
                        <div class="ribbon-wrap">
                            <div class="ribbon">
                                80% Off
                            </div>
                        </div>
                        <div class="panel-heading">Ribbon</div>
                        <div class="panel-body">
                            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="ribbon-pannel ribbon-default ribbon-dark">
                        <div class="ribbon-wrap">
                            <div class="ribbon">
                                80% Off
                            </div>
                        </div>
                        <div class="panel-heading">Ribbon-dark</div>
                        <div class="panel-body">
                            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="ribbon-pannel ribbon-default ribbon-primary">
                        <div class="ribbon-wrap">
                            <div class="ribbon">
                                80% Off
                            </div>
                        </div>
                        <div class="panel-heading">Ribbon-primary</div>
                        <div class="panel-body">
                            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="ribbon-pannel ribbon-default ribbon-success">
                        <div class="ribbon-wrap">
                            <div class="ribbon">
                                80% Off
                            </div>
                        </div>
                        <div class="panel-heading">Ribbon-success</div>
                        <div class="panel-body">
                            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="ribbon-pannel ribbon-default ribbon-info">
                        <div class="ribbon-wrap">
                            <div class="ribbon">
                                80% Off
                            </div>
                        </div>
                        <div class="panel-heading">Ribbon-info</div>
                        <div class="panel-body">
                            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="ribbon-pannel ribbon-default ribbon-warning">
                        <div class="ribbon-wrap">
                            <div class="ribbon">
                                80% Off
                            </div>
                        </div>
                        <div class="panel-heading">Ribbon-warning</div>
                        <div class="panel-body">
                            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="ribbon-pannel ribbon-default ribbon-danger">
                        <div class="ribbon-wrap">
                            <div class="ribbon">
                                80% Off
                            </div>
                        </div>
                        <div class="panel-heading">Ribbon-danger</div>
                        <div class="panel-body">
                            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="ribbon-pannel ribbon-default ribbon-alert">
                        <div class="ribbon-wrap">
                            <div class="ribbon">
                                80% Off
                            </div>
                        </div>
                        <div class="panel-heading">Ribbon-alert</div>
                        <div class="panel-body">
                            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="ribbon-pannel ribbon-default ribbon-system">
                        <div class="ribbon-wrap">
                            <div class="ribbon">
                                80% Off
                            </div>
                        </div>
                        <div class="panel-heading">Ribbon-system</div>
                        <div class="panel-body">
                            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- Panels -->
                <div class="col-lg-8 clearfix">
                    <h2 class="section-header">Panels</h2>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                    <div class="jp-panel panel-primary">
                        <div class="panel-heading">
                            <span class="panel-title">Primary Header</span>
                            <div class="panel-menu">
                                <code class="bg-primary dark">.panel-primary</code>
                            </div>
                        </div>
                        <div class="panel-body">
                            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </div>

                    </div>
                </div>
                <div class="col-md-4">
                    <div class="jp-panel panel-warning">
                        <div class="panel-heading">
                            <span class="panel-title">warning Header</span>
                            <div class="panel-menu">
                                <code class="bg-warning dark">.panel-warning</code>
                            </div>
                        </div>
                        <div class="panel-body">
                            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </div>

                    </div>
                </div>
                <div class="col-md-4">
                    <div class="jp-panel panel-system">
                        <div class="panel-heading">
                            <span class="panel-title">system Header</span>
                            <div class="panel-menu">
                                <code class="bg-system dark">.panel-system</code>
                            </div>
                        </div>
                        <div class="panel-body">
                            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </div>

                    </div>
                </div>

                <div class="col-md-4">
                    <div class="jp-panel panel-success">
                        <div class="panel-heading">
                            <span class="panel-title">success Header</span>
                            <div class="panel-menu">
                                <code class="bg-success dark">.panel-success</code>
                            </div>
                        </div>
                        <div class="panel-body">
                            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </div>

                    </div>
                </div>
                <div class="col-md-4">
                    <div class="jp-panel panel-danger">
                        <div class="panel-heading">
                            <span class="panel-title">danger Header</span>
                            <div class="panel-menu">
                                <code class="bg-danger dark">.panel-danger</code>
                            </div>
                        </div>
                        <div class="panel-body">
                            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </div>

                    </div>
                </div>
                <div class="col-md-4">
                    <div class="jp-panel panel-dark">
                        <div class="panel-heading">
                            <span class="panel-title">dark Header</span>
                            <div class="panel-menu">
                                <code class="bg-dark dark">.panel-dark</code>
                            </div>
                        </div>
                        <div class="panel-body">
                            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </div>

                    </div>
                </div>
                <div class="col-md-4">
                    <div class="jp-panel panel-info">
                        <div class="panel-heading">
                            <span class="panel-title">info Header</span>
                            <div class="panel-menu">
                                <code class="bg-info dark">.panel-info</code>
                            </div>
                        </div>
                        <div class="panel-body">
                            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </div>

                    </div>
                </div>
                <div class="col-md-4">
                    <div class="jp-panel panel-alert">
                        <div class="panel-heading">
                            <span class="panel-title">alert Header</span>
                            <div class="panel-menu">
                                <code class="bg-alert dark">.panel-alert</code>
                            </div>
                        </div>
                        <div class="panel-body">
                            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </div>

                    </div>
                </div>
                <div class="col-md-4">
                    <div class="jp-panel">
                        <div class="panel-heading">
                            <span class="panel-title">Default Header</span>
                            <div class="panel-menu">
                                <code class="bg-light dark">.panel-alert</code>
                            </div>
                        </div>
                        <div class="panel-body">
                            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </div>

                    </div>
                </div>
            </div>

            <div class="row">
                <!-- Style Panels -->
                <div class="col-lg-8 clearfix">
                    <h2 class="section-header">Style Panels</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="jp-panel panel-warning panel-border top">
                        <div class="panel-heading">
                            <span class="panel-title">warning Header</span>
                            <div class="panel-menu">
                                <code class="bg-warning dark">.panel-warning</code>
                            </div>
                        </div>
                        <div class="panel-body">
                            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </div>

                    </div>
                </div>
                <div class="col-md-4">
                    <div class="jp-panel panel-alert panel-border top">
                        <div class="panel-heading">
                            <span class="panel-title">alert Header</span>
                            <div class="panel-menu">
                                <code class="bg-alert dark">.panel-alert</code>
                            </div>
                        </div>
                        <div class="panel-body">
                            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </div>

                    </div>
                </div>
                <div class="col-md-4">
                    <div class="jp-panel panel-primary panel-border top">
                        <div class="panel-heading">
                            <span class="panel-title">Primary Header</span>
                            <div class="panel-menu">
                                <code class="bg-primary dark">.panel-primary</code>
                            </div>
                        </div>
                        <div class="panel-body">
                            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </div>

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="jp-panel-card bg-dark">
                        <div class="panel-content">
                            <div class="panel-title">Dark Header</div>
                            <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        </div>
                        <div class="panel-action">
                            <a href="#">Action</a>
                            <a href="#">Action</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="jp-panel-card bg-success">
                        <div class="panel-content">
                            <div class="panel-title">Dark Header</div>
                            <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        </div>
                        <div class="panel-action">
                            <a href="#">Action</a>
                            <a href="#">Action</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="jp-panel-card bg-info">
                        <div class="panel-content">
                            <div class="panel-title">Dark Header</div>
                            <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        </div>
                        <div class="panel-action">
                            <a href="#">Action</a>
                            <a href="#">Action</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="jp-panel-card bg-primary">
                        <div class="panel-content">
                            <div class="panel-title">Dark Header</div>
                            <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        </div>
                        <div class="panel-action">
                            <a href="#">Action</a>
                            <a href="#">Action</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="jp-panel-card bg-system">
                        <div class="panel-content">
                            <div class="panel-title">Dark Header</div>
                            <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        </div>
                        <div class="panel-action">
                            <a href="#">Action</a>
                            <a href="#">Action</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="jp-panel-card bg-danger">
                        <div class="panel-content">
                            <div class="panel-title">Dark Header</div>
                            <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        </div>
                        <div class="panel-action">
                            <a href="#">Action</a>
                            <a href="#">Action</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="jp-panel-card bg-default">
                        <div class="panel-image">
                            <img src="img/h1.jpg">
                            <div class="panel-title">Image Panel with Pofile</div>
                        </div>
                        <div class="panel-content">
                            <a class="panel-profile-img pull-right" href="javascript:;"><img src="img/t.jpg" alt=""></a>
                            <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        </div>
                        <div class="panel-action">
                            <a href="#">Action</a>
                            <a href="#">Action</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="jp-panel-card bg-default">
                        <div class="panel-image">
                            <img src="img/h2.jpg">
                            <div class="panel-title">Image Panel with Pofile</div>
                        </div>
                        <div class="panel-content">
                            <a class="panel-button pull-right" href="javascript:;">
                                <button class="btn btn-icon btn-icon-round btn-floating btn-danger jp-ripple"><i class="fa fa-heart"></i></button>
                            </a>
                            <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        </div>
                        <div class="panel-action">
                            <a href="#">Action</a>
                            <a href="#">Action</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="jp-panel-card bg-default">
                        <div class="panel-image">
                            <img src="img/h3.jpg">
                            <div class="hover">HOVER</div>
                            <div class="panel-title">Image Panel with Pofile</div>
                        </div>
                        <div class="panel-content">
                            <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        </div>
                        <div class="panel-action">
                            <a href="#">Action</a>
                            <a href="#">Action</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <div class="jp-panel-card bg-danger">
                        <div class="panel-content">
                            <div class="jp-panel-icon"><i class="fa fa-users"></i></div>
                            <div class="jp-num">100</div>
                            <h3>Registered users</h3>
                            <p>so far in our blog, and our website.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="jp-panel-card bg-info">
                        <div class="panel-content">
                            <div class="jp-panel-icon"><i class="fa fa-line-chart"></i></div>
                            <div class="jp-num">80</div>
                            <h3>Daily Visitors</h3>
                            <p>this is the average value.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="jp-panel-card bg-primary">
                        <div class="panel-content">
                            <div class="jp-panel-icon"><i class="fa fa-envelope"></i></div>
                            <div class="jp-num">560</div>
                            <h3>New Messages</h3>
                            <p>messages per day.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="jp-panel-card bg-system">
                        <div class="panel-content">
                            <div class="jp-panel-icon"><i class="fa fa-feed"></i></div>
                            <div class="jp-num">50</div>
                            <h3>Subscribers</h3>
                            <p>on our site right now.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="jp-panel">
                        <div class="panel-heading">
                            <span class="panel-title">Default Header</span>
                            <ul class="nav panel-tabs">
                                <li class="active">
                                    <a href="#tab1" data-toggle="tab" aria-expanded="true">Tab 1</a>
                                </li>
                                <li class="">
                                    <a href="#tab2" data-toggle="tab" aria-expanded="false">Tab 2</a>
                                </li>
                            </ul>
                        </div>
                        <div class="panel-body">
                            <div class="tab-content">
                                <div id="tab1" class="tab-pane active">
                                    <p>#tab1 Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                </div>
                                <div id="tab2" class="tab-pane">
                                    <p>#tab2 Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                </div>
                            </div>
                            </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="jp-panel">
                        <div class="panel-heading">
                            <span class="panel-title">Default Header</span>
                            <div class="panel-menu pull-right mr10 ml5">
                                <div class="progress" style="width: 150px;">
                                    <div id="progressbar1" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
                                        <span class="sr-only">45% Complete</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-body">
                            <p>
                                Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="jp-panel">
                        <div class="panel-heading">
                            <span class="panel-title">Default Header</span>
                            <div class="panel-menu pull-right mr10 ml5">
                                <input type="checkbox" class="jpswitch jpswitch-small" />
                            </div>
                        </div>
                        <div class="panel-body">
                            <p>
                                Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <div class="jp-panel-carousel">
                        <div class="panel-content">
                            <div id="carousel-example-generic1" class="carousel slide" data-ride="carousel">
                                <!-- Indicators -->
                                <ol class="carousel-indicators">
                                    <li data-target="#carousel-example-generic1" data-slide-to="0" class="active"></li>
                                    <li data-target="#carousel-example-generic1" data-slide-to="1"></li>
                                </ol>

                                <!-- Wrapper for slides -->
                                <div class="carousel-inner" role="listbox">
                                    <div class="item active">
                                        <img src="img/h1.jpg" alt="h1">
                                        <div class="carousel-caption">
                                            h1
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img src="img/h2.jpg" alt="h2">
                                        <div class="carousel-caption">
                                            h2
                                        </div>
                                    </div>
                                </div>

                                <!-- Controls -->
                                <a class="left carousel-control" href="#carousel-example-generic1" role="button" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="right carousel-control" href="#carousel-example-generic1" role="button" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="jp-panel-carousel">
                        <div class="panel-content">
                            <div class="carousel slide" id="carousel-example-generic2" data-ride="carousel">
                                <!-- Indicators -->
                                <ol class="carousel-indicators">
                                    <li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
                                    <li data-target="#carousel-example-generic2" data-slide-to="1"></li>
                                </ol>

                                <!-- Wrapper for slides -->
                                <div class="carousel-inner" role="listbox">
                                    <div class="item active">
                                        <img src="img/h1.jpg" alt="h1">
                                        <div class="carousel-caption">
                                            h1
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img src="img/h2.jpg" alt="h2">
                                        <div class="carousel-caption">
                                            h2
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="jp-panel-carousel">
                        <div class="panel-content">
                            <div id="carousel-example-generic3" class="carousel slide" data-ride="carousel">
                                <!-- Wrapper for slides -->
                                <div class="carousel-inner" role="listbox">
                                    <div class="item active">
                                        <img src="img/h2.jpg" alt="h1">
                                        <div class="carousel-caption">
                                            h1
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img src="img/h3.jpg" alt="h2">
                                        <div class="carousel-caption">
                                            h2
                                        </div>
                                    </div>
                                </div>

                                <!-- Controls -->
                                <a class="left carousel-control" href="#carousel-example-generic3" role="button" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="right carousel-control" href="#carousel-example-generic3" role="button" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="jp-panel-carousel">
                        <div class="panel-content">
                            <div id="carousel-example-generic4" class="carousel slide" data-ride="carousel">
                                <!-- Wrapper for slides -->
                                <div class="carousel-inner" role="listbox">
                                    <div class="item active">
                                        <img src="img/h3.jpg" alt="h1">
                                        <div class="carousel-caption">
                                            <h3>First slide label</h3>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img src="img/h2.jpg" alt="h2">
                                        <div class="carousel-caption">
                                            <h3>Second slide label</h3>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Controls -->
                                <a class="left carousel-control" href="#carousel-example-generic4" role="button" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="right carousel-control" href="#carousel-example-generic4" role="button" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <div class="jp-panel-card jp-dark bodrad5">
                        <div class="panel-content">
                            <div class="icon"><i class="fa fa-edge"></i></div>
                        </div>
                        <div class="title">
                            <h3>Dark Header</h3>
                            <p>Some default panel content here. </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="jp-panel-card jp-danger bodrad5">
                        <div class="panel-content">
                            <div class="icon"><i class="fa fa-shopping-bag"></i></div>
                        </div>
                        <div class="title">
                            <h3>Dark Header</h3>
                            <p>Some default panel content here. </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="jp-panel-card jp-primary bodrad5">
                        <div class="panel-content">
                            <div class="icon"><i class="fa fa-bell"></i></div>
                        </div>
                        <div class="title">
                            <h3>Dark Header</h3>
                            <p>Some default panel content here. </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="jp-panel-card jp-alert bodrad5">
                        <div class="panel-content">
                            <div class="icon"><i class="fa fa-camera"></i></div>
                        </div>
                        <div class="title">
                            <h3>Dark Header</h3>
                            <p>Some default panel content here. </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="jp-panel-card bg-primary">
                        <div class="panel-image">
                            <img class="scale" src="img/h1.jpg">
                            <div class="panel-title">Image Panel with Pofile</div>
                        </div>
                        <div class="weather-heading">
                            <div class="weather-heading-top">
                                <h4 class="pull-left m-n">Cloudy</h4>
                                <a class="weather-settings pull-right" style="line-height:25px; height: 25px; width: 25px;"><i class="fa fa-exclamation-triangle"></i></a>
                            </div>
                            <div class="weather-heading-bottom">
                                <div class="weather-symbol pull-left"><i class="fa fa-cloud"></i></div>
                                <div class="pull-right">
                                    <h1 class="weather-result">41°
                            <span class="weather-details">
                                <h4>Today</h4>
                                <p>Cloudy</p>
                                <p class="degree-range">42°-34°</p>
                            </span><!-- weather-details -->
                                    </h1><!-- weather-result -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="jp-panel-card bg-info">
                        <div class="panel-content text-center">
                            <div class="clearfix"><div class="pull-right">90 Followers</div><div class="pull-left">128 Following</div></div>
                            <img src="img/t.jpg" class="img-thumbnail img-circle" />
                            <h5>See Card</h5>
                            <p><i class="fa fa-location-arrow"></i> San Francisco, CA</p>
                            <div class="clearfix"><div class="pull-right">982 Likes</div><div class="pull-left">921 Requests</div></div>
                        </div>
                        <div class="panel-action">
                            <div class="media">
                                <div class="media-left">
                                    <a href="#">
                                        <img class="media-object img-circle" alt="64x64" src="img/t.jpg" data-holder-rendered="true" style="width: 64px; height: 64px;">
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading">Top aligned media</h4>
                                    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.</p>
                                    </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <!-- Style Panels Hover-->
                <div class="col-lg-8 clearfix">
                    <h2 class="section-header">Panels Hover</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="jp-panel-card">
                        <div class="panel-image">
                            <img src="img/h1.jpg">
                            <div class="panel-title title-hover">
                                <h3>Image Panel with Pofile</h3>
                                <p>Some default panel content here.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="jp-panel-card">
                        <div class="panel-image">
                            <img class="scale" src="img/h2.jpg">
                            <div class="panel-main-title title-hover-move-down">
                                <h3>Image Panel with Pofile</h3>

                            </div>
                            <div class="panel-sub-title title-hover-move-up">
                                <p>Some default panel content here.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="jp-panel-card">
                        <div class="panel-image">
                            <img class="scale" src="img/h3.jpg">
                            <div class="panel-main-title title-hover-move-left fade-in">
                                <h3>Image Panel with Pofile</h3>

                            </div>
                            <div class="panel-sub-title title-hover-move-right fade-in">
                                <p>Some default panel content here.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>






<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/treeview.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/icheck.min.js"></script>
<script src="js/jpswitch.js"></script>
<script src="js/jpripple.js"></script>
<script src="js/all.js"></script>
<script>
    $(document).ready(function(){
        PanelInit();
    });
</script>
</body>
</html>